<template>
    <div class="Main">
        <app-header :active="activeType"></app-header>
        <div class="page_content">
            <x-card v-if="loading" class="bounce-loading">
                <bounce-loading></bounce-loading>
            </x-card>
            <x-card v-if="!loading" class="content-card">
                <div class="HotVideo__wrap" v-if="list && list.length">
                <div class="Title__wrap">
                    <div class="Title__content--1">
                    数字典藏馆
                    </div>
                </div>
                <div class="HotVideo__content">
                    <div class="HotVideo__item" v-for="item in list" :key="item.id" @click="goDomain(item.subDomain)">
                    <div class="HotVideo__thumbnail">
                        <img :src="item.logo.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
                    </div>
                    <div class="HotVideo__info">
                        <div class="HotVideo__title">{{ item.platformName }}</div>
                        <div class="HotVideo__tags" v-if="item.sourceInfo">
                        <span class="HotVideo__tag" v-for="tag,index in item.sourceInfo.split(',')" :key="'tag'+index">{{ tag }}</span>
                        </div>
                        <!-- <div class="HotVideo__meta">
                        <div class="HotVideo__author"><span>{{authorLabel(item.type)}}：</span>{{(item.type == 'video' || item.type == 'audio' || item.type == 'text')?item.speaker:item.author}}</div>
                        <div class="HotVideo__institution" v-if="item.type == 'video' || item.type == 'audio' || item.type == 'text'"><span>主办单位：</span>{{item.organizer}}</div>
                        </div> -->
                    </div>
                    </div>
                </div>

                <div class="page-warp">
                        <base-pagination
                         :hide-on-single-page="true"
                            @current-change="listDiancang"
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="size"
                            :current-page.sync="page"
                        ></base-pagination>
                    </div>
            </div>
             <Empty v-if="total==0"></Empty>
            </x-card>
        </div>
        <app-footer></app-footer>
    </div>
</template>

<script>
import {XCard} from "@zkwq/business";
import { ListDiancang } from '@/service/magazine';  
import AppHeader from './components/AppHeader.vue';
import AppFooter from './components/AppFooter.vue';
import Empty from './components/Empty.vue';
export default {
  name: 'Diancang',
  components: {
        AppHeader,
        AppFooter,
        Empty,
        XCard
    },
  data() {
    return {
      page:1,
      size:10,
      list:[],
      total:0,
      loading:false,
      domain:'.stpaper.cn',
    }
  },
  mounted() {
    this.listDiancang();
  },
  methods: {
    goDomain(subDomain){
        window.open('http://'+subDomain+this.domain)

    },
    listDiancang(){
        this.loading = true;
        ListDiancang({page:this.page,size:this.size}).then(res=>{
            console.log("数字典藏馆",res)
            this.list = res.data.records
            this.total = res.data.total
        }).finally(()=>{
            this.loading = false;
        })
    }
  }
}   
</script>   
<style scoped lang="scss">
  @import '@zkwq/business/dist/var.scss';
.Main{
    height:100%;
    width: 100%;
    overflow: auto;

    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .page-warp{
            width: 100%;
            text-align: center;
            margin-top: 40px;
        }

        .content-card{
            min-height: calc(100vh - 288px);
        }
     .HotVideo__wrap{
          width: 100%;
          margin-top: 12px;
          .Title__wrap{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
            .Title__content--1{
                margin: 0;
                font-size: 20px;
                font-weight: 600;
                color: #333;
            }
          }

          .HotVideo__content{
            width: 100%;
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;

            .HotVideo__item{
              width: calc(25% - 12px);
              background: white;
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover{
                box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
              }

              .HotVideo__thumbnail{
                width: 100%;
                height: 120px;
                overflow: hidden;
                position: relative;
                background: #2973D7;

                img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: all 0.3s ease;
                }

                .HotVideo__play-btn{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 40px;
                  height: 40px;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: all 0.3s ease;

                  .HotVideo__play-icon{
                    color: white;
                    font-size: 20px;
                  }
                }

                &:hover {
                  img{
                    transform: scale(1.05);
                  }
                  
                  .HotVideo__play-btn{
                    background: rgba(0, 0, 0, 0.8);
                    transform: translate(-50%, -50%) scale(1.1);
                  }
                }
              }

              .HotVideo__info{
                padding: 12px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .type__create-time{
                  display: flex;
                  justify-content: space-between;
                  align-content: center;
                  .create-time{
                    font-size: 12px;
                    color: #646464;
                  }
                }

                .HotVideo__title{
                  font-size: 14px;
                  font-weight: bold;
                  color: #333;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotVideo__subtitle{
                  font-size: 12px;
                  color: #666;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotVideo__tags{
                  display: flex;
                  flex-wrap: wrap;
                  gap: 4px;

                  .HotVideo__tag{
                    font-size: 10px;
                    color: $--color-primary;
                    background: $--color-primary-light-9;
                    border: 1px solid $--color-primary-light-7;
                    padding: 2px 6px;
                    border-radius: 12px;
                    white-space: nowrap;
                  }
                }

                .HotVideo__meta{
                  margin-top: 4px;
                  display: flex;
                  flex-direction: column;
                  gap: 6px;

                  .HotVideo__author,
                  .HotVideo__institution{
                    font-size: 11px;
                    color: #999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span{
                      font-size: 12px;
                      color:$--color-text-regular;
                    }
                  }
                }
              }
            }
          }
        }
    }

}
</style>
